﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Installation and Usage Directions</title>

        <style type="text/css">
            .h1, p, li { font-family: Verdana, Arial, Serif; }
        </style>
	</head>
	<body>
	
<h1>Installation and Usage</h1>

<p>
Herein are installation directions for the templated DNNMenu navigation provider and a version of the MinimalExtropy skin that utilizes this provider.
</p>

<h2>To install:</h2>
<ol><li>Use a clean 5.0.1 install, login as host,</li>
<li>Install the DNNTemplatedMenuNavigationProvider package,</li>
<li>Install the Templated MinimalExtropy skin package, and</li>
<li>Change a page skin (or the site skin, if you’re brave) to use the MinimalExtropy.Templated/Index skin (the only change here is to use this provider; it was hardcoded in the original design).</li>
</ol>
<h2>To use:</h2>
<ol>
<li>Navigate to the settings for the page that is the root of the menu you wish to template (e.g. the Admin page).</li>
<li>In the Advanced->Page Header Tags textbox, enter the string:
                <pre>        &lt;meta name="menuTemplate" content="" /&gt;</pre></li>
<li>Return to the page you specified to use the template skin, and note that the tagged menu is now using the default template (which is not that attractive until the pages have been structured into a better hierarchy).</li>
<li>The default template displays children in a large font; grandchildren are in a normal font. You’ll have to use the Admin->Tabs page to rearrange some tabs to see this behavior. For example, in one of the screenshots I moved the Tabs page to be under the “Web Administration” tab.</li>

<li>The default template is located at /Providers/NavigationProviders/DNNTemplatedMenuNavigationProvider/Default.ascx. You can specify an alternate template by adding its name to the content portion of the meta tag; by way of example, a tag that reads as belowwill use the Descriptions.ascx template, which displays a page’s description (if any) underneath its link. 
                <pre>        &lt;meta name="menuTemplate" content="Descriptions" /&gt;</pre></li>
<li>Skin designers can deploy their own templates; these may be accessed via a tag of the form:
                <pre>        &lt;meta name="menuTemplate" content="skin:[TemplateName]" /&gt;</pre></li>
<li>Similarly, a host may provide a portal-specific template which may be accessed via:
                <pre>        &lt;meta name="menuTemplate" content="portal:[TemplateName]" /&gt;</pre></li>
<li>Finally, the templates generally render highly similar markup (a nested hierarchy of ULs) and are differentiated primarily by CSS. A template CSS can be specified through another meta tag, formatted as:
                <pre>        &lt;meta name="menuCss" content="CssFile" /&gt;</pre></li>
<li>Like the template, a “portal:” or “skin:” prefix may be used; if none are specified the css is drawn from the provider directory. The second screenshot below uses the “wide” css template.
</ol>

<p>
So, to reproduce the screenshots, the first uses the following metadata:</p>
                <pre>        &lt;meta name="menuTemplate" content="" /&gt;</pre>
<p>
And the second uses:
</p>
                <pre>        &lt;meta name="menuTemplate" content="Heading" /&gt;</pre>
                <pre>        &lt;meta name="menuCss" content="Wide" /&gt;</pre>
<p>Everything else is just normal page configuration (titles, page descriptions, and images).
</p>

<h2>Demonstration Screenshots</h2>

<p>
Screenshots demonstrating the flexibility and utility of this menu provider are 
<a href="http://blogs.law.harvard.edu/brandonhaynes/dotnetnuke-dnnmenu-mega-menu-provider-screenshot/">available here</a>.
</p>
	</body>
</html>